<template>
  <div>{{}}</div>
</template>

<script>
import { watchEffect, ref, onMounted } from "@vue/composition-api";

export default {
  setup() {
    const refCount = ref(0);

    //和watch是一个作用,只是它的依赖是自动收集的,无需我们在第一个参数中手动传递依赖
    watchEffect(() => console.log(refCount.value),/*{flush:"post"}*//**← 默认*/);

    setTimeout(() => {
      refCount.value += 1;
    }, 1500);

    /** Note the first run is executed before the component is mounted. So if you wish to access the DOM (or template refs) in a watched effect, do it in the mounted hook:*/
    onMounted(() => {
      watchEffect(() => {
        // access the DOM or template refs
      });
    });

    console.log('---1---');
    // fire synchronously
    watchEffect(() => {
      console.log('watchEffect sync');
    }, {
      flush: 'sync' //默认是post
    });
    console.log('---2---')
    // fire before component updates
    watchEffect(() => {
      console.log('watchEffect pre')
    }, {
      flush: 'pre'
    });

    /*
      ---1---
      watchEffect sync
      ---2---
      0
      watchEffect pre
      1
    */
  }
};
</script>

<style scoped></style>
